<template>
  <div id="myOrder">
    <!-- 头部 -->
    <div class="dark-top">
      <a @click="goback" class="page-back"><div></div></a>
      <div class="page-title">
        <font style="vertical-align: inherit;">我的订单</font>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dark-body">
      <!-- 导航栏 -->
      <div class="dark-site">
        <div class="dark-navbar">
          <div id="orderAll" v-on:click="order_click('orderAll')">
            <div
              class="navbar-tab-div"
              :class="focus == 'orderAll' ? statusCss : ''"
            >
              全部
            </div>
            <div :class="focus == 'orderAll' ? orderClass : ''"></div>
          </div>
          <div id="obligation" v-on:click="order_click('obligation')">
            <div
              class="navbar-tab-div"
              :class="focus == 'obligation' ? statusCss : ''"
            >
              待付款
            </div>
            <div :class="focus == 'obligation' ? orderClass : ''"></div>
          </div>
          <div id="closed" v-on:click="order_click('closed')">
            <div
              class="navbar-tab-div"
              :class="focus == 'closed' ? statusCss : ''"
            >
              待收货
            </div>
            <div :class="focus == 'closed' ? orderClass : ''"></div>
          </div>
          <div id="complete" v-on:click="order_click('complete')">
            <div
              class="navbar-tab-div"
              :class="focus == 'complete' ? statusCss : ''"
            >
              已完成
            </div>
            <div :class="focus == 'complete' ? orderClass : ''"></div>
          </div>
          <div id="payinfo" v-on:click="order_click('payinfo')">
            <div
              class="navbar-tab-div"
              :class="focus == 'payinfo' ? statusCss : ''"
            >
              报名
            </div>
            <div :class="focus == 'payinfo' ? orderClass : ''"></div>
          </div>
        </div>
      </div>
      <mt-tab-container v-model="focus">
        <mt-tab-container-item id="orderAll">
          <MyOrderAll v-if="focus == 'orderAll'"></MyOrderAll>
        </mt-tab-container-item>
        <mt-tab-container-item id="obligation">
          <MyOrderObligation v-if="focus == 'obligation'"></MyOrderObligation>
        </mt-tab-container-item>
        <mt-tab-container-item id="closed">
          <MyOrderClosed v-if="focus == 'closed'"></MyOrderClosed>
        </mt-tab-container-item>
        <mt-tab-container-item id="complete">
          <MyOrderComplete v-if="focus == 'complete'"></MyOrderComplete>
        </mt-tab-container-item>
        <mt-tab-container-item id="payinfo">
          <PayOrder v-if="focus == 'payinfo'"></PayOrder>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import MyOrderAll from "@/components/shopping/MyOrderAll.vue";
import MyOrderObligation from "@/components/shopping/MyOrderObligation.vue";
import MyOrderClosed from "@/components/shopping/MyOrderClosed.vue";
import MyOrderComplete from "@/components/shopping/MyOrderComplete.vue";
import PayOrder from "@/components/shopping/PayOrder.vue";

export default {
  components: {
    MyOrderAll,
    MyOrderObligation,
    MyOrderClosed,
    MyOrderComplete,
    PayOrder
  },
  data() {
    return {
      focus: "orderAll",
      orderClass: "is-selected",
      statusCss: "tab-div-sel"
    };
  },
  created() {
    let strClick = sessionStorage.getItem("orderIndex");
    if (strClick != null) {
      this.focus = strClick;
    }
  },
  methods: {
    // 点击入口后切换当前入口变量
    order_click(eId) {
      this.focus = eId;
    },
    goback() {
      this.$router.go(-1);
    }
  },
  watch: {
    focus(val) {
      sessionStorage.setItem("orderIndex", val); // 存入一个值
    }
  }
};
</script>

<style lang="scss" scoped>
h4,
p {
  margin: 0;
  padding: 0;
}
/* 头部 */
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #ffffff;
  position: fixed;
  top: 0;
  z-index: 9999;
  /* 设置渐变 */
  background: rgb(255, 0, 0); /* Old browsers */
  background: -moz-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right bottom,
    rgb(255, 127, 95) 10%,
    rgb(229, 39, 77) 70%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  .page-back {
    width: 0.5625rem;
    height: 0.9375rem;
    text-decoration: none;
    color: #1a1a1a;
    display: inline-block;
    position: absolute;
    left: 0.9375rem;
    top: 1.0625rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/return-white.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }

  .page-title {
    font-size: 20px;
    text-align: center;
    display: block;
    line-height: 1;
    position: absolute;
    top: 0.8rem;
    left: 40%;
  }
}

//内容
.dark-body {
  top: 4.125rem;
  position: relative;
  .dark-site {
    position: fixed;
    width: 100%;
    background-color: white;
    z-index: 9999;
  }
  //导航栏
  .dark-navbar {
    width: 21.5625rem;
    height: 3.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    color: rgba(51, 51, 51, 1);
    font-size: 0.9375rem;

    div {
      .navbar-tab-div {
        padding-top: 15px;
      }
      .tab-div-sel {
        color: rgba(255, 0, 0, 1);
      }
      .is-selected {
        width: 1.25rem;
        height: 0.25rem;
        margin: 0.625rem auto;
        background-color: rgba(255, 0, 0, 1);
      }
    }
  }
}

/* 底部 */
.dark-foot {
  width: 100%;
  height: 2.8125rem;
  box-shadow: 0.125rem 0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.05);
  position: fixed;
  bottom: 0;
  background-color: white;

  .foot-left {
    float: left;

    :first-child {
      margin-top: 0.53125rem;
    }
    p {
      font-size: 0.75rem;
      line-height: 0.9375rem;
      margin-left: 0.9375rem;
    }
    .font-left-color {
      color: rgba(255, 32, 0, 1);
    }
  }
  .foot-button {
    float: right;
    width: 5.625rem;
    height: 1.875rem;
    background-color: rgba(255, 32, 0, 1);
    text-align: center;
    line-height: 1.875rem;
    border-radius: 1.25rem;
    position: relative;
    top: 0.46875rem;
    right: 0.9375rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
